<template>
  <view>
    <view class="py-1 px-2 bg-white d-flex j-sb a-center border-bottom" v-for="(item,index) in conversationList"
      :key='index' @click="toinfo(item)">
      <view class="d-flex a-center">
        <view class="">
          <image class="terrace_img rounded-circle-50" :src="item.userProfile.avatar" mode=""></image>
        </view>
        <view class="font-35 text-000 ml-2">
          <view class="text-333 my-1">{{item.userProfile.nick}}</view>
          <rich-text v-if="item.lastMessage.type == 'TIMTextElem'" :nodes="richtextHtml(item.lastMessage.payload.text)" class="text-999 font-28"></rich-text>
          <view v-if="item.lastMessage.type == 'TIMImageElem'" class="text-999 font-28">[图片]</view>
          <view v-if="item.lastMessage.type == 'TIMVideoFileElem'" class="text-999 font-28">[视频]</view>
          <view v-if="item.lastMessage.type == 'TIMCustomElem'" class="text-999 font-28">[{{item.lastMessage.payload.data == 'videomsg' ? '视频通话' : '语音通话'}}]</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import $store from '@/store/index.js';
  export default {
    data() {
      return {
        conversationList: []
      }
    },
    onLoad() {
      this.chatList()
      uni.$tim.on(uni.$TIM.EVENT.MESSAGE_RECEIVED, this.chatList);
      // #ifdef APP-PLUS
      plus.push.clear();
      // #endif
    },
    methods: {
      richtextHtml(html) {
        const regex = new RegExp('<img', 'gi');
        html = html.replace(regex, '<img class="title-img"');
        return html
      },
      toinfo(item) {
        uni.navigateTo({
          url: "./kefu?user_id=" + item.userProfile.userID
        })
      },
      connectSocketInit() {
        uni.showLoading({
          mask: true,
          title: "请稍后"
        })
        // 店铺信息
        this.$H.post("admin/user/tim/sign").then(res => {
          let promise = uni.$tim.login({
            userID: uni.getStorageSync('user_id').toString(),
            userSig: res.data.sign
          })
          promise.then((imResponse) => {
            console.log(imResponse.data); // 登录成功
            if (imResponse.data.repeatLogin === true) {
              // 标识账号已登录，本次登录操作为重复登录。v2.5.1 起支持
              // console.log(imResponse.data.errorInfo);
            }
            //聊天列表
            setTimeout(() => {
              this.chatList()
            }, 500)
            // uni.$tim.on('TIM.EVENT.SDK_READY', this.chatList);
          }).catch((imError) => {
            console.warn('login error:', imError); // 登录失败的相关信息
          });
        })
      },
      chatList() {
        // 获取全量的会话列表
        let promise = uni.$tim.getConversationList();
        promise.then((imResponse) => {
          this.conversationList = imResponse.data.conversationList; // 全量的会话列表，用该列表覆盖原有的会话列表
          console.log(this.conversationList);
          // uni.hideLoading()
        }).catch((imError) => {
          console.warn('getConversationList error:', imError); // 获取会话列表失败的相关信息
        });
      }
    },
  }
</script>

<style lang="scss" scoped>
  .terrace_img {
    width: 120upx;
    height: 120upx;
  }
  rich-text {
    .title-img {
      // max-width: 150px;
    }
  }
</style>
